<template>
  <div class="right-content">
    <div class="list" v-for="item in navListContent" :key="item._id">
      <p>{{ item.name }}</p>
      <ul class="item-list">
        <li class="item">
          <ul class="item-child-list display-flex">
            <li v-for="child in item.navigations" :key="child._id" class="item-child">
              <a :href="child.navigation_link" target="_blank">
                <div class="top">
                  <img :src="child.navigation_icon" width="40" height="40" alt="link" />
                  <span class="name">{{ child.navigation_name }}</span>
                </div>
                <span class="desc mellipsis">{{ child.navigation_intro }}</span>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { throttle } from 'lodash'
export default {
  name: 'RightContent',
  props: {
    navListContent: {
      type: Array,
      default: () => []
    },
    leftNavIndex: {
      type: Number,
      default: 0
    }
  },
  watch: {
    leftNavIndex(newVal) {
      this.scrollToTop(newVal)
    }
  },
  beforeDestroy() {
    // 移除滚动事件监听器
    window.removeEventListener('scroll', this.throttledHandleScroll)
  },
  methods: {
    // 点击左侧导航栏，滚动到对应位置
    scrollToTop(value) {
      // 用户不是手动滚动，移除滚动事件监听器
      clearTimeout(timeout)
      window.removeEventListener('scroll', this.throttledHandleScroll)
      const liElements = document.querySelectorAll('.list .item')
      liElements[value].scrollIntoView({ behavior: 'smooth', block: 'start' })
      // 元素距顶部有一些间隙
      const offset = 40 // 设置顶部间隙
      const elementPosition = liElements[value].getBoundingClientRect().top
      const offsetPosition = elementPosition + window.pageYOffset - offset

      window.scrollTo({
        top: offsetPosition,
        behavior: 'smooth'
      })
      var timeout = setTimeout(() => {
        window.addEventListener('scroll', this.throttledHandleScroll)
      }, 3000)
    },
    // 监听滚动条位置，让导航栏对应元素高亮
    handleScroll() {
      const liElements = document.querySelectorAll('.list .item')
      // 获取视口位置的元素距离顶部的距离
      const viewportPosition = window.pageYOffset
      // console.log(viewportPosition)
      // 遍历元素，判断是否在视口范围内
      liElements.forEach((item, index) => {
        const elementPosition = item.getBoundingClientRect().top
        const offset = 50 // 设定一个偏移量，例如50px
        if (viewportPosition > elementPosition - offset && viewportPosition < elementPosition + item.offsetHeight) {
          this.$emit('changeActiveIndex', index)
        }
      })
    },
    throttledHandleScroll: throttle(function () {
      this.handleScroll()
    }, 300)
  }
}
</script>

<style lang="scss" scoped>
.right-content {
  margin-left: 30px;
  margin-bottom: 30px;
  p {
    font-size: 16px;
    font-weight: bold;
    color: #252525;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .item {
    padding: 10px 10px 10px 0;
    .item-child {
      width: 190px;
      padding: 10px;
      margin-right: 10px;
      margin-bottom: 15px;
      border-radius: 8px;
      background-color: #fff;
      transition: transform 0.3s ease;
      a {
        display: block;
        padding: 10px;
        color: black;
        border-radius: 8px;
        box-shadow: 0px 0px 11px -4px rgba(55, 84, 106, 0.25);
      }
      &:hover {
        animation: bounce 1s ease;
      }
    }
    .top {
      background-color: #f5f5f5;
      margin-bottom: 10px;
      img {
        border-radius: 50%;
      }
      span {
        margin-left: 5px;
        font-size: 14px;
        color: pink;
        font-weight: 600;
      }
    }
    .item-child-list {
      flex-wrap: wrap;
    }
  }
}

@keyframes bounce {
  from,
  20%,
  53%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
</style>
